<template>
  <div>
    <el-table
      :data="firmwareList"
      style="width: 100%"
    >
      <el-table-column
        :label="$t('firmware')"
        prop="name"
      />
      <el-table-column
        :label="$t('remark')"
        prop="remark"
      />
      <el-table-column
        align="right"
      >
        <template slot="header" slot-scope="scope">
          <el-button
            icon="el-icon-plus"
            type="text"
            @click="showAdd"
          />
        </template>
        <template slot-scope="scope">
          <el-button
            v-clipboard:copy=" scope.row.downloadPath"
            icon="el-icon-document-copy"
            type="text"
          />
          <!--          <el-button-->
          <!--            icon="el-icon-edit"-->
          <!--            type="text"-->
          <!--            @click="updateOtaFirmware( scope.row)"-->
          <!--          />-->
          <el-button
            icon="el-icon-delete"
            type="text"
            style="color: red"
            @click="deleteOtaFirmware( scope.row)"
          />
        </template>
      </el-table-column>
    </el-table>

    <el-dialog
      :visible.sync="dialogFirmwareFormVisible"
    >
      <el-form
        :model="firmware"
        label-width="120px"
      >
        <el-form-item :label="$t('remark')">
          <el-input v-model="firmware.remark" />
        </el-form-item>
        <el-form-item :label="$t('file')">
          <el-upload
            ref="upload"
            :headers="headers"
            drag
            name="file"
            :action="baseURL+'/ota/firmware/insert'"
            :auto-upload="false"
            :on-success="handleSuccess"
            :on-error="handleError"
            :data="firmware"
          >
            <i class="el-icon-upload" />
            <div class="el-upload__text">拖到此处，或<em>点击上传</em></div>
            <div slot="tip" class="el-upload__tip">只能上传不超过500M</div>
          </el-upload>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFirmwareFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="submitUpload">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  deleteOtaFirmware,
  listOtaFirmware
} from '@/api/ota/otaFirmwareApi'
import {
  getToken
} from '@/util/storage'
export default {
  name: 'Firmware',
  props: {
    productId: {
      type: Number,
      default: null
    }
  },
  data() {
    return {
      firmwareList: [],
      dialogFirmwareFormVisible: false,
      firmware: {},
      firmwareModel: 'insert',
      headers: {
        'access-token': getToken()
      },
      baseURL: window.VUE_APP_BASE_API // 'http://localhost:8080'
    }
  },
  watch: {
    productId: {
      deep: true,
      handler(val) {
        if (this.productId) {
          this.listOtaFirmware()
        }
      }
    }
  },
  created() {
    if (this.productId) {
      this.listOtaFirmware()
    }
  }, methods: {
    handleSuccess(response, file, fileList) {
      this.listOtaFirmware()
    },
    handleError(err, file, fileList) {
      this.listOtaFirmware()
    },
    deleteOtaFirmware(item) {
      const that = this
      this.$confirm(this.$t('deletePrompt'), this.$t('prompt'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteOtaFirmware({
            firmwareId: item.firmwareId
          }).then(res => {
            const { code } = res
            if (code === '200') {
              that.listOtaFirmware()
            }
          })
        })
    },
    updateOtaFirmware(item) {
      this.firmware = item
      this.firmwareModel = 'update'
      this.dialogFirmwareFormVisible = true
    },
    showAdd() {
      this.firmware = {
        productId: this.productId
      }
      this.firmwareModel = 'insert'
      this.dialogFirmwareFormVisible = true
    },
    submitUpload() {
      this.$refs.upload.submit()
    },
    listOtaFirmware() {
      listOtaFirmware({
        productId: this.productId
      }).then(res => {
        const { code, data } = res
        if (code === '200') {
          this.firmwareList = data
          this.firmware = data[0]
        } else {
          this.firmwareList = []
          this.firmware = {}
        }
      })
    }
  }
}
</script>

<style scoped>
  .item{
    width: 100%;
    background: #cfcfcf;
    border-radius: 13px;
    height: 40px;
    padding: 5px;
    margin: 5px;
    display: flex;
    justify-content: space-between;
  }
  .item .title{
    line-height: 30px;
  }
</style>
